<template>
  <VPage>
    <VTable ref="tableRef" v-bind="tableOptions">
      <template #form="{ form }">
        <VGroup>
          <el-select v-model="form.dateRange.type" style="width: 140px">
            <el-option label="计划发货时间" value="deliver_time"></el-option>
          </el-select>
          <el-date-picker
            v-model="form.dateRange.value"
            type="daterange"
            value-format="YYYY-MM-DD"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          />
        </VGroup>
        <VCascader
          v-model="form.create_user_id"
          placeholder="计划人员"
          multiple
          collapse-tags
          filterable
          clearable
          style="min-width: 160px"
        />
        <VCascader
          v-model="form.sale_id"
          placeholder="运营人员"
          multiple
          collapse-tags
          filterable
          clearable
          style="min-width: 160px"
        />
      </template>
      <template #toolbar_btns>
        <el-tabs v-model="plan_type" @tab-change="tabChange" class="w-full">
          <el-tab-pane label="FBA发货计划" :name="2"></el-tab-pane>
          <el-tab-pane label="海外仓发货计划" :name="1"></el-tab-pane>
        </el-tabs>
      </template>
      <template #TableCell="{ row, column }">
        <el-link
          :underline="false"
          type="primary"
          @click="handlePath(row, column)"
          >{{ row[column.field] }}</el-link
        >
      </template>
    </VTable>
  </VPage>
</template>
<script setup lang="jsx">
import { failedJobList } from "./api.js";
import { getDateRange } from "@/utils/time.js";
import action from "@/utils/action.js"
const router = useRouter();
const baseName = "";
const tableRef = ref();
// 查询
const query = () => {
  tableRef?.value.query();
};
const plan_type = ref(2);
const tabChange = (name) => {
  plan_type.value = name;
  query();
};
const handlePath = async (row, column) => {
  let data = tableRef?.value?.getForm();
  const tableForm = {
    sale_id: [row.sale_id],
    user: { type: "create_user_id", value: [row.create_user_id] },
    dateRange: {
      type: "deliver_time",
      value: [data.dateRange.value?.[0] + " 00:00:00", data.dateRange.value?.[1] + " 23:59:59"],
      range: true,
    },
  };
  let obj = {
    wait_sale_confirm_num: [2],
    wait_order_num: [3],
    part_order_num: [4],
    order_num: [5],
  };
  tableForm.plan_status = obj[column.field];
  tableForm.plan_type = plan_type.value;
  sessionStorage.setItem("_table_form", JSON.stringify({ tableForm }));
  router.push({
    path: "/demand/deliver",
    query: {
      plan_type: plan_type.value,
    },
  });
};
const tableOptions = reactive({
  border: true,
  showHeaderOverflow: false,
  formConfig: {
    data: {
      dateRange: {
        type: "deliver_time",
        value: [getDateRange().start, getDateRange().end],
        range: true,
      },
    },
  },
  columns: [
    { field: "sale_name", title: "运营人员", width: 140 },
    { field: "create_user", title: "计划人员", width: 140 },
    {
      title: "发货计划",
      align: "center",
      children: [
        {
          field: "wait_sale_confirm_num",
          title: "待确认",
          slots: { default: "TableCell" },
        },
        {
          field: "wait_order_num",
          title: "待建头程单",
          slots: { default: "TableCell" },
        },
        {
          field: "part_order_num",
          title: "部分建头程单",
          slots: { default: "TableCell" },
        },
        {
          field: "order_num",
          title: "已建头程单",
          slots: { default: "TableCell" },
        },
      ],
    },

    {
      title: "头程备库单",
      align: "center",
      children: [
        { field: "tc_wait_audit_num", title: "头程单待审核" },
        { field: "tc_wait_shipping_num", title: "头程单待发货" },
        { field: "tc_part_shipping_num", title: "头程单部分发货" },
        { field: "tc_shipping_num", title: "头程单已发货" },
        { field: "tc_part_return_num", title: "头程单部分退货" },
        { field: "tc_return_num", title: "头程单全部退货" },
      ],
    },
  ],
  proxyConfig: {
    autoLoad: false,
    ajax: {
      query: ({ page, form }) => {
        const { deliver_time } = form;
        let params = {
          ...page,
          ...form,
          plan_type: plan_type.value,
          deliver_time_start: deliver_time?.start || undefined,
          deliver_time_end: deliver_time?.end || undefined,
          deliver_time: undefined,
        };
        return failedJobList(params);
      },
    },
  },
});
</script>
<style lang="scss" scoped></style>
